
/* ==================
         聊天
 ==================== */

.cu-chat {
    display: flex;
    flex-direction: column;
}

.cu-chat .cu-item {
    display: flex;
    padding: 30*1upx 30*1upx 70*1upx;
    position: relative;
}

.cu-chat .cu-item > .cu-avatar {
    width: 80*1upx;
    height: 80*1upx;
}

.cu-chat .cu-item > .main {
    max-width: calc(100% - 260upx);
    margin: 0 40*1upx;
    display: flex;
    align-items: center;
}

.cu-chat .cu-item > image {
    height: 320*1upx;
}

.cu-chat .cu-item > .main .content {
    padding: 20*1upx;
    border-radius: 6*1upx;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    font-size: 30*1upx;
    position: relative;
    min-height: 80*1upx;
    line-height: 40*1upx;
    text-align: left;
}

.cu-chat .cu-item > .main .content:not([class*="bg-"]) {
    background-color: #ffffff;
    color: #333333;
}

.cu-chat .cu-item .date {
    position: absolute;
    font-size: 24*1upx;
    color: #8799a3;
    width: calc(100% - 320upx);
    bottom: 20*1upx;
    left: 160*1upx;
}

.cu-chat .cu-item .action {
    padding: 0 30*1upx;
    display: flex;
    align-items: center;
}

.cu-chat .cu-item > .main .content::after {
    content: "";
    top: 27*1upx;
    transform: rotate(45deg);
    position: absolute;
    z-index: 100;
    display: inline-block;
    overflow: hidden;
    width: 24*1upx;
    height: 24*1upx;
    left: -12*1upx;
    right: initial;
    background-color: inherit;
}

.cu-chat .cu-item.self > .main .content::after {
    left: auto;
    right: -12*1upx;
}

.cu-chat .cu-item > .main .content::before {
    content: "";
    top: 30*1upx;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
    display: inline-block;
    overflow: hidden;
    width: 24*1upx;
    height: 24*1upx;
    left: -12*1upx;
    right: initial;
    background-color: inherit;
    filter: blur(5*1upx);
    opacity: 0.3;
}

.cu-chat .cu-item > .main .content:not([class*="bg-"])::before {
    background-color: #333333;
    opacity: 0.1;
}

.cu-chat .cu-item.self > .main .content::before {
    left: auto;
    right: -12*1upx;
}

.cu-chat .cu-item.self {
    justify-content: flex-end;
    text-align: right;
}

.cu-chat .cu-info {
    display: inline-block;
    margin: 20*1upx auto;
    font-size: 24*1upx;
    padding: 8*1upx 12*1upx;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6*1upx;
    color: #ffffff;
    max-width: 400*1upx;
    line-height: 1.4;
}
